<template>
	<div class="w100 p1 h60 bgcfff bsbb" style="border: #e6e6e6 1px solid;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
		<el-form ref="form" :rules="rulesForm" :model="form">
			<el-form-item label="您的建议" prop="content"><el-input type="textarea" placeholder="请输入您的建议" v-model="form.content"></el-input></el-form-item>
			<el-form-item label="您的联系方式" prop="phone"><el-input maxlength="11" placeholder="请输入您的联系方式" v-model="form.phone"></el-input></el-form-item>
			<el-form-item label="图片上传" prop="image">
				<el-upload
					ref="upload"
					:class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
					action
					accept="image/png,image/gif,image/jpg,image/jpeg"
					list-type="picture-card"
					:file-list="fileLists"
					:auto-upload="false"
					:before-upload="handleBeforeUpload"
					:on-change="handleImgChange"
					:on-remove="handleRemove"
				>
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
			</el-form-item>
			<el-form-item>
				<div style="width: 100%; padding-top: 4rem ;text-align: center;">
					<el-button type="primary" :loading="loading" @click="onSubmit('form')">
						<span v-if="!loading">提交</span>
						<span v-else>提交中...</span>
					</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { upload } from '@/api/drill.js';
import { addFeedback } from '@/api/user.js';
import { getItem } from '@/utils/storage.js';
export default {
	name: '',
	data() {
		//图片
		const imageRules = (rule, value, callback) => {
			if (this.fileLists.length == 0) {
				callback(new Error('请选择上传图片'));
			} else {
				callback();
			}
		};
		//联系方式
		const phoneData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入请输入您的联系方式'));
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('请正确的手机号格式'));
			} else {
				callback();
			}
		};
		return {
			//图片上传
			showBtnImg: true,
			noneBtnImg: false,
			fileLists: [],
			dialogVisible: false,
			dialogImageUrl: '',

			rulesForm: {
				content: [{ required: true, message: '请输入您的建议', trigger: 'blur' }],
				phone: [{ required: true, validator: phoneData, trigger: 'blur' }],
				image: [{ required: true, validator: imageRules, trigger: 'change' }]
			},
			loading: false,
			form: {
				image: null,
				token: getItem('token')
			}
		};
	},
	created() {},
	methods: {
		// 上传文件之前的钩子
		handleBeforeUpload(file) {
			if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$notify.warning({
					title: '警告',
					message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
				});
			}
			let size = file.size / 1024 / 1024 / 2;
			if (size > 2) {
				this.$notify.warning({
					title: '警告',
					message: '图片大小必须小于2M'
				});
			}
		},

		//选择文件变化
		handleImgChange(e, flies) {
			let formData = new FormData();
			formData.append('file', e.raw);
			upload(formData).then(res => {
				this.form.image = res.data;
			});
			this.noneBtnImg = flies.length >= 1;
			this.fileLists = flies;
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			this.form.image = null;
			this.noneBtnImg = fileList.length >= 1;
		},

		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true;
					addFeedback(this.form).then(res => {
						if (res.code == 1001) {
							this.loading = false;
							this.form = {
								image: null,
								token: getItem('token')
							};
							this.fileLists = [];
							this.noneBtnImg = false;
							this.msgSuccess(res.msg);
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
/deep/ .el-form-item__label {
	margin: 0;
	text-align: left;
	color: #000;
	float: none;
	font-weight: bold;
}
.el-form-item {
	margin-bottom: 1.5rem;
}
/deep/ .el-button {
	height: 2.8rem;
	width: 15rem !important;
	border-radius: 8px 8px 8px 8px;
}
/deep/.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 0.4ren;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 1.5rem;
	color: #8c939d;
	width: 10rem;
	height: 10rem;
	line-height: 10rem;
	text-align: center;
}
.avatar {
	width: 10rem;
	height: 10rem;
	display: block;
}
/deep/.disUoloadSty .el-upload--picture-card {
	display: none; /* 上传按钮隐藏 */
}
</style>
